<template>
  <view class="container">
    <Card class="plan-card">
      <view class="plan-header">
        <text class="plan-title">{{ plan.title }}</text>
        <view class="plan-status" :class="plan.statusClass">
          {{ plan.status }}
        </view>
      </view>
      
      <view class="plan-info">
        <view class="info-item">
          <text class="label">关联学生：</text>
          <text class="value">{{ plan.student }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">科目：</text>
          <text class="value">{{ plan.subject }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">执行时间：</text>
          <text class="value">{{ plan.time }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">创建时间：</text>
          <text class="value">{{ plan.createTime }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">最后更新：</text>
          <text class="value">{{ plan.updateTime }}</text>
        </view>
      </view>
    </Card>
    
    <Card class="content-card">
      <view class="card-header">
        <text class="card-title">任务内容</text>
        <Button class="edit-btn" type="info" size="small" text="编辑" @click="goToEdit" />
      </view>
      <text class="content">{{ plan.content }}</text>
    </Card>
    
    <Card class="progress-card">
      <view class="card-header">
        <text class="card-title">完成进度</text>
      </view>
      
      <view class="progress-stats">
        <view class="stat-item">
          <text class="stat-label">总次数</text>
          <text class="stat-value">{{ progress.total }}</text>
        </view>
        
        <view class="stat-item">
          <text class="stat-label">已完成</text>
          <text class="stat-value">{{ progress.completed }}</text>
        </view>
        
        <view class="stat-item">
          <text class="stat-label">完成率</text>
          <text class="stat-value">{{ progress.rate }}%</text>
        </view>
      </view>
      
      <view class="progress-bar">
        <view class="progress-fill" :style="{ width: progress.rate + '%' }"></view>
      </view>
    </Card>
    
    <Card class="records-card">
      <view class="card-header">
        <text class="card-title">执行记录</text>
      </view>
      
      <view class="records-list">
        <view 
          v-for="(record, index) in records" 
          :key="index" 
          class="record-item"
        >
          <view class="record-header">
            <text class="record-date">{{ record.date }}</text>
            <view class="record-result" :class="record.resultClass">
              {{ record.result }}
            </view>
          </view>
          <text class="record-comment">{{ record.comment }}</text>
        </view>
      </view>
    </Card>
    
    <view class="action-buttons">
      <Button 
        v-if="plan.status === '已发布'" 
        class="action-btn" 
        type="primary" 
        text="标记完成" 
        @click="markComplete"
      />
      <Button 
        v-else
        class="action-btn" 
        type="secondary" 
        text="开始执行" 
        @click="startExecution"
      />
      <Button class="action-btn" type="error" text="删除计划" @click="deletePlan" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      plan: {
        id: '1',
        title: '数学每日练习',
        student: '张小明',
        subject: '数学',
        time: '每天 19:00-20:00',
        createTime: '2025.08.25',
        updateTime: '2025.08.28',
        status: '已发布',
        statusClass: 'status-published',
        content: '完成课本第5章练习题1-20题，重点练习代数运算部分。'
      },
      progress: {
        total: 30,
        completed: 25,
        rate: 83
      },
      records: [
        {
          date: '2025.08.28',
          result: '已完成',
          resultClass: 'result-completed',
          comment: '按时完成练习，正确率90%'
        },
        {
          date: '2025.08.27',
          result: '已完成',
          resultClass: 'result-completed',
          comment: '完成练习，正确率85%'
        },
        {
          date: '2025.08.26',
          result: '未完成',
          resultClass: 'result-not-completed',
          comment: '因临时有事未能完成'
        }
      ]
    };
  },
  
  methods: {
    goToEdit() {
      uni.navigateTo({
        url: '/pages/plan/edit?id=' + this.plan.id
      });
    },
    
    markComplete() {
      uni.showModal({
        title: '标记完成',
        content: '确定要标记此计划为已完成吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已标记完成',
              icon: 'success'
            });
          }
        }
      });
    },
    
    startExecution() {
      uni.showToast({
        title: '开始执行功能待实现',
        icon: 'none'
      });
    },
    
    deletePlan() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个学习计划吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            
            // 返回计划列表
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.plan-card {
  margin-bottom: $spacing-base;
}

.plan-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-lg;
}

.plan-title {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
}

.plan-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-published {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.plan-info {
  font-size: $font-size-sm;
}

.info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  color: $text-secondary;
  width: 160rpx;
}

.value {
  flex: 1;
  color: $text-primary;
}

.content-card, .progress-card, .records-card {
  margin-bottom: $spacing-base;
}

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.content {
  font-size: $font-size-base;
  color: $text-primary;
  line-height: 1.6;
}

.progress-stats {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-lg;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: $font-size-sm;
  color: $text-secondary;
  margin-bottom: $spacing-xs;
}

.stat-value {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.progress-bar {
  width: 100%;
  height: 20rpx;
  background-color: $background-color;
  border-radius: 10rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: $primary-color;
  border-radius: 10rpx;
}

.records-list {
  margin-top: $spacing-sm;
}

.record-item {
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.record-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
}

.record-date {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.record-result {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.result-completed {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.result-not-completed {
  background-color: rgba($error-color, 0.1);
  color: $error-color;
}

.record-comment {
  font-size: $font-size-base;
  color: $text-primary;
  line-height: 1.5;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: $spacing-base;
  right: $spacing-base;
  display: flex;
  flex-direction: row;
}

.action-btn {
  flex: 1;
  
  &:not(:last-child) {
    margin-right: $spacing-base;
  }
}
</style>